<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&amp;type=webgl&amp;ak=K3ydaZ42YBTWDQGQ8UTCAitdIMBygzbf"></script>
</head>
<body>
<div id="container" style="width: 50%;height: 50%"></div>
<input th:text="${asf}" type="checkbox"/>
</body>
<script type="text/javascript">

    var point=new BMapGL.Point(114.31736019981723, 30.464856311751138);
    // 创建点坐标
    var map = new BMapGL.Map("container");
    // 创建地图实例
    map.centerAndZoom(point, 15);
    map.disableNormalization
    // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    var marker=new BMapGL.Marker(point);
    map.addOverlay(marker);
    //标签响应事件
    marker.addEventListener("click",function () {
        alert('当前经纬度:114.404926, 30.529189')
    })
    //地图响应事件
    map.addEventListener('click', function (e) {
        alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
    });



    var p1=point;
    var p2=point;
    var websocket=null;
    if('WebSocket' in window){
        websocket=new WebSocket('ws://localhost:8080/webSocket');
    }
    else {
        alert('该浏览器不支持websocket');
    }
    websocket.onopen=function (event){
        console.log('建立连接');
    }
    websocket.onClose=function (event) {
        console.log('连接关闭')
    }
    websocket.onmessage=function (event){
        console.log('收到消息:'+event.data)
        var tem=JSON.parse(event.data);
        map.clearOverlays();
        p2 = p1;
        p1 = new BMapGL.Point(tem.x, tem.y);
        var polyline = new BMapGL.Polyline([
            p1,
            p2,
        ], {
            strokeColor: 'blue',
            strokeWeight: 2,
            strokeOpacity: 0.5
        });
        map.setCenter(new BMapGL.Point((p1.lng+p2.lng)/2, (p1.lat+p2.lat)/2));
        map.addOverlay(polyline);
        map.addOverlay(new BMapGL.Marker(p1));
        map.addOverlay(new BMapGL.Marker(p2));
    }
    websocket.onerror=function (){
        alert('通信发生错误')
    }
    window.onbeforeunload=function (){
        websocket.close();
    }
</script>
</html>